<!-- 点亮成功 -->
<template>
	<view class="wrap u-skeleton">
		<!-- 中心块-成功 -->
		<view class="contentBox u-skeleton-rect">
			<!-- 奖杯图标 -->
			<view class="jbBox u-skeleton-circle">
				<image src="https://tuanwei.yjha.com.cn/resource/shut_jb_top_img.png" mode="widthFix"></image>
			</view>
			<image class="statusImg u-skeleton-fillet" src="https://tuanwei.yjha.com.cn/resource/shut_gif.gif"
				mode="widthFix">
			</image>
			<text class="statusTip u-skeleton-rect">恭喜您闯关成功，您的成绩已生成</text>
			<text class="accuracy u-skeleton-rect">所有关卡全部点亮</text>
		</view>

		<!-- 按钮 -->
		<view class="btnGroup">
			<button type="default" class="routerBtn u-skeleton-rect" @click="cert_target">查看成绩</button>
		</view>
		<!-- toast -->
		<u-toast ref="uToast" />
		<!-- 遮罩 -->
		<u-mask :show="show" @click="show = false">
				<view class="warp">
					<u-loading mode="flower" :show="true"></u-loading>
				</view>
			</u-mask>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				wxKey: '',
				token: '',
				loading: true, // 是否显示骨架屏组件
				show:false
			}
		},
		onShow(){
			uni.showLoading({
				title: '请稍后...',
				mask: false
			});
		},
		onLoad(option) {
			// 禁用分享
			wx.hideShareMenu()
			setTimeout(function () {
			    uni.hideLoading();
			}, 3000);
			this.wxKey = option.wxKey;
			this.token = option.token;
			console.log(option)
			
		},
		methods: {
			// 查看证书
			cert_target() {
				uni.redirectTo({
					url: '../certificate/certificate?wxKey=' + this.wxKey + '&token=' + this.token
				});
			},
			// 弹出提示
			showToast(title, type, url) {
				this.$refs.uToast.show({
					title: title,
					type: type,
					url: url
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		width: 100%;
		height: 100vh;
		background: url('https://tuanwei.yjha.com.cn/resource/realName_bg.png') no-repeat;
		background-size: 100% 100%;

		.contentBox {
			position: fixed;
			top: 20%;
			left: 3%;
			width: 94%;
			height: 60%;

			background: url('https://tuanwei.yjha.com.cn/resource/shutSuccesss_bg.png') no-repeat;
			background-size: 100% 100%;
			background-position: center;
			background-color: #fe772f;
			border-radius: 10px;
			margin: 0 auto;

			.jbBox {
				position: absolute;
				top: -110px;
				left: 50%;
				width: 140px;
				height: 140px;
				margin-left: -70px;

				image {
					width: 140px;
					height: 140px;
				}
			}

			.statusImg {
				position: absolute;
				width: 94%;
				height: 90%;
				left: 3%;
				top: 5%;
			}

			.statusTip {
				position: absolute;
				bottom: 5%;
				display: block;
				font-size: 18px;
				color: #fff;
				line-height: 30px;
				text-align: center;
				font-weight: bold;
				bottom: 14%;
				width: 90%;
				left: 5%;
			}

			.accuracy {
				position: absolute;
				display: block;
				font-size: 16px;
				color: #ffd136;
				line-height: 30px;
				text-align: center;
				font-weight: bold;
				bottom: 5%;
				width: 90%;
				left: 5%;
			}
		}

		.btnGroup {
			position: fixed;
			bottom: 10%;
			width: 80%;
			left: 10%;
			height: 42px;
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;

			.routerBtn {
				display: block;
				width: 80%;
				height: 42px;
				line-height: 42px;
				color: #8d4f0d;
				font-family: '黑体';
				background: url('https://tuanwei.yjha.com.cn/resource/ligthBtn_bg.png') no-repeat;
				border-radius: 21px;
				background-size: 100% 100%;
			}
		}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	}
</style>
